<template>
  <el-dropdown @command="handleCommand">
    <div id="username-avatar">
      <el-avatar
        :src="currentUser.imagePath"
        @error="errorHandler">
        <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">
      </el-avatar>
      <span>{{ currentUser.userName }}</span>
    </div>
    <el-dropdown-menu>
      <!-- 每个选项的数据由父组件传递 -->
      <el-dropdown-item v-for="(item, index) in menuItem" :key="index" :command="item.command" :icon="item.icon"
                        :divided="item.divided">
        {{ item.content }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>

import {mapState} from "vuex";

export default {
  name: "AvatarMenu",
  props: {
    // 展示的选项数据，由父组件传递
    menuItem: {
      type: Array,
      required: true,
      default: []
    },
  },
  computed: {
    ...mapState(['currentUser'])
  },
  methods: {
    handleCommand(command) {
      command.handleClick();
    },
    errorHandler() {
      return true;
    },
  }
}
</script>

<style scoped>
#username-avatar {
  display: flex;
  justify-content: center;
  align-items: center;

  span {
    cursor: pointer;
    margin-left: 10px;
  }

}

.el-dropdown {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 5px;
}

.el-avatar {
  margin-right: 5px;
  transition: transform 0.3s ease-in-out; /* 添加过渡效果 */
}

.el-avatar:hover {
  transform: scale(1.3); /* 鼠标悬停时放大30% */
}


.el-dropdown:hover {
  color: #43abff;
}

.el-dropdown-menu {
  margin-left: 5px;
  margin-right: 5px;
  text-align: center;
}
</style>